<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>令牌</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
    <!-- Placeholder for potential icon library if needed later -->
</head>
<body>
    <div class="header">
        <h1>令牌</h1>
        <a href="{{ url_for('add_account_route') }}" class="add-icon">+</a>
    </div>

    <div class="main-content">
        <div id="token-cards">
            <!-- Token cards will be inserted here by JavaScript -->
            <div class="token-card" style="display: none;" id="card-template">
                <div class="token-card-header">
                    <div class="account-info">
                        <span class="dot"></span>
                        <span class="account-name">Account Name</span>
                    </div>
                    <button class="pin-button">置顶</button> <!-- Placeholder button -->
                </div>
                <div class="token-card-body">
                    <!-- You can add the lock icon here if desired -->
                    <img src="{{ url_for('static', filename='lock.svg') }}" alt="Lock" class="lock-icon">
                    <div class="token-code">000000</div>
                </div>
                <div class="token-card-footer">
                    <span class="tag">未定义标签</span> <!-- Placeholder tag -->
                    <span class="validity">长期有效</span> <!-- Placeholder validity -->
                </div>
                <div class="progress-bar">
                    <div class="progress-bar-inner"></div>
                </div>
            </div>
        </div>
    </div>

    <nav class="bottom-nav">
        <a href="#" class="nav-item active">
            <!-- Placeholder for shield icon -->
            <svg viewBox="0 0 24 24"><path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z"/></svg>
            <span>令牌</span>
        </a>
        <a href="#" class="nav-item">
            <!-- Placeholder for help icon -->
            <svg viewBox="0 0 24 24"><path d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"/></svg>
            <span>帮助</span>
        </a>
        <a href="#" class="nav-item">
            <!-- Placeholder for settings icon -->
            <svg viewBox="0 0 24 24"><path d="M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.08-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.08.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z"/></svg>
            <span>设置</span>
        </a>
    </nav>

    <script>
        function fetchTokens() {
            fetch('/get_tokens')
                .then(response => response.json())
                .then(data => {
                    const cardsContainer = document.getElementById('token-cards');
                    const templateCard = document.getElementById('card-template');
                    cardsContainer.innerHTML = ''; // Clear existing cards but keep template
                    cardsContainer.appendChild(templateCard); // Re-add template

                    for (const account in data) {
                        const tokenInfo = data[account];
                        const newCard = templateCard.cloneNode(true);
                        newCard.style.display = 'block'; // Make it visible
                        newCard.id = `card-${account}`; // Unique ID

                        newCard.querySelector('.account-name').textContent = account;
                        const codeElement = newCard.querySelector('.token-code');
                        // Format code with spaces
                        codeElement.textContent = tokenInfo.code.match(/.{1,3}/g).join(' ');

                        const progressBarInner = newCard.querySelector('.progress-bar-inner');
                        progressBarInner.style.width = (tokenInfo.remaining / 30 * 100) + '%';

                        // Store remaining time and elements for countdown
                        newCard.dataset.remaining = tokenInfo.remaining;
                        newCard.dataset.progressBarId = `progress-${account}`;
                        progressBarInner.id = newCard.dataset.progressBarId;

                        cardsContainer.appendChild(newCard);
                    }
                })
                .catch(error => console.error('Error fetching tokens:', error));
        }

        function updateTimers() {
            const cards = document.querySelectorAll('#token-cards .token-card:not(#card-template)');
            let shouldFetch = false;
            cards.forEach(card => {
                let remaining = parseInt(card.dataset.remaining, 10);
                remaining -= 1;

                if (remaining <= 0) {
                    shouldFetch = true; // Fetch new codes when any timer hits 0
                    remaining = 0; // Prevent negative display briefly
                }

                card.dataset.remaining = remaining;
                const progressBarInner = document.getElementById(card.dataset.progressBarId);

                if (progressBarInner) {
                    progressBarInner.style.width = (remaining / 30 * 100) + '%';
                }
            });

            if (shouldFetch) {
                fetchTokens(); // Fetch new tokens immediately
            }
        }

        // Initial fetch and start timers
        fetchTokens();
        setInterval(updateTimers, 1000); // Update timers every second

    </script>
</body>
</html>
